<template>
  <div class="">
    <div class="content content--canvas">
				<h2 class="content__title">Shift</h2>
		</div>
  </div>
</template>
 
<script>
import { floor, rand, randIn, randRange, fadeIn, fadeOut, fadeInOut, dist, angle, lerp, HALF_PI, TAU, TO_RAD } from './js/util.js'
const { PI, cos, sin, abs, sqrt, pow, round, random, atan2 } = Math
export default {
  data () {
    return {
      pipeCount: 30,
      pipePropCount: 8,
      pipePropsLength: 10 * 8,
      turnCount: 8,
      turnAmount: (360 / 8) * TO_RAD,
      turnChanceRange: 58,
      baseSpeed: 0.5,
      rangeSpeed: 1,
      baseTTL: 100,
      rangeTTL: 300,
      baseWidth: 2,
      rangeWidth: 4,
      baseHue: 180,
      rangeHue: 60,
      backgroundColor: 'hsla(150,80%,1%,1)',

      container: null,
      canvas: {
        a: document.createElement('canvas'),
        b: document.createElement('canvas')
      },
      ctx: null,
      center: [],
      tick: null,
      pipeProps: null,
    }
  },
  mounted() {
    this.init()
    window.addEventListener('resize', this.resize)
  },
  methods: {
    init() {
      this.createCanvas()
      this.resize()
      this.initPipes()
      this.draw()
    },

    initPipes() {
      this.pipeProps = new Float32Array(this.pipePropsLength)
      let i
      for (i = 0; i < this.pipePropsLength; i += this.pipePropCount) {
        this.initPipe(i)
      }
    },
    initPipe(i) {
      let x, y, direction, speed, life, ttl, width, hue

      x = rand(this.canvas.a.width)
      y = this.center[1]
      direction = (round(rand(1)) ? HALF_PI : TAU - HALF_PI)
      speed = this.baseSpeed + rand(this.rangeSpeed)
      life = 0
      ttl = this.baseTTL + rand(this.rangeTTL)
      width = this.baseWidth + rand(this.rangeWidth)
      hue = this.baseHue + rand(this.rangeHue)

      this.pipeProps.set([x, y, direction, speed, life, ttl, width, hue], i)
    },
    updatePipes() {
      this.tick++
      let i
      for (i = 0; i < this.pipePropsLength; i += this.pipePropCount) {
        this.updatePipe(i)
      }
    },
    updatePipe(i) {
      // console.log(i)
      let i2=1+i, i3=2+i, i4=3+i, i5=4+i, i6=5+i, i7=6+i, i8=7+i
      let x, y, direction, speed, life, ttl, width, hue, turnChance, turnBias

      x = this.pipeProps[i]
      y = this.pipeProps[i2]
      direction = this.pipeProps[i3]
      speed = this.pipeProps[i4]
      life = this.pipeProps[i5]
      ttl = this.pipeProps[i6]
      width = this.pipeProps[i7]
      hue = this.pipeProps[i8]

      this.drawPipe(x, y, life, ttl, width, hue)

      life++
      x += cos(direction) * speed
      y += sin(direction) * speed
      turnChance = !(this.tick % round(rand(this.turnChanceRange))) && (!(round(x) % 6) || !(round(y) % 6))
      turnBias = round(rand(1)) ? -1 : 1
      direction += turnChance ? this.turnAmount * turnBias : 0

      this.pipeProps[i] = x
      this.pipeProps[i2] = y
      this.pipeProps[i3] = direction
      this.pipeProps[i5] = life

      this.checkBounds(x, y)
      life > ttl && this.initPipe(i)
    },
    drawPipe(x, y, life, ttl, width, hue) {
      // console.log(x)
      this.ctx.b.save()
      this.ctx.b.strokeStyle = `hsla(${hue},75%,50%,${fadeInOut(life, ttl) * 0.125})`
      this.ctx.b.beginPath()
      this.ctx.b.arc(x, y, width, 0, TAU)
      this.ctx.b.stroke()
      this.ctx.b.closePath()
      this.ctx.b.restore()
    },

    checkBounds(x, y) {
      if (x > this.canvas.a.width) x = 0
      if (x < 0) x = this.canvas.a.width
      if (y > this.canvas.a.height) y = 0
      if (y < 0) y = this.canvas.a.height
    },

    createCanvas() {
      this.container = document.querySelector('.content--canvas')
      this.canvas.b.style = `
        position: fixed
        top: 0
        left: 0
        width: 100%
        height: 100%
      `
      this.container.appendChild(this.canvas.b)
      this.ctx = {
        a: this.canvas.a.getContext('2d'),
        b: this.canvas.b.getContext('2d')
      }
      this.tick = 0
      this.center = []
    },
    resize() {
      const { innerWidth, innerHeight } = window
      
      this.canvas.a.width = innerWidth
      this.canvas.a.height = innerHeight

      this.ctx.b.drawImage(this.canvas.b, 0, 0)

      this.canvas.b.width = innerWidth
      this.canvas.b.height = innerHeight
      
      this.ctx.b.drawImage(this.canvas.a, 0, 0)
      
       this.center[0] = 0.5 * this.canvas.a.width
       this.center[1] = 0.5 * this.canvas.a.height
    },

    render() {
      this.ctx.b.save()
      this.ctx.b.fillStyle = this.backgroundColor
      this.ctx.b.fillRect(0,0,this.canvas.b.width,this.canvas.b.height)
      this.ctx.b.restore()

      this.ctx.b.save()
      this.ctx.b.filter = 'blur(12px)'
      this.ctx.b.drawImage(this.canvas.a, 0, 0)
      this.ctx.b.restore()

      this.ctx.b.save()
      this.ctx.b.drawImage(this.canvas.a, 0, 0)
      this.ctx.b.restore()
    },
    draw() {
      this.updatePipes()
      this.render()
      window.requestAnimationFrame(this.draw)
    }

  },
}
</script>
 
<style scoped lang="less">
 
</style>